<!--Created by yangzhiqiang -->
<template>
    <div class="show_reportManager">
        <div class="row">
            <div class="col-lg-12">
                <h4 class="page-header">报表管理</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="row panel-body">
                    <div class="col-lg-12">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="">
                                <el-date-picker v-model="dateStart" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptions1"></el-date-picker>
                                <el-date-picker v-model="dateEnd" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptions2"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="onSubmit">生成报表</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <template>
            <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" 
            style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column prop="handTime" label="报告名称">
                </el-table-column>
                <el-table-column prop="detail.country" label="报告大小" >
                </el-table-column>
                <el-table-column prop="detail.appCount" label="下载次数" >
                </el-table-column>
                <el-table-column prop="handTime" label="生成时间" >
                </el-table-column>
                <el-table-column label="用户操作" >
                    <template scope="scope">
                        <el-button @click="handleClick" type="text" size="small">
                            <i class="fa fa-2x fa-download"></i>
                        </el-button>
                        <el-button type="text" size="small"><i class="fa fa-2x fa-trash-o"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paging_delet_relative">
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
                        :current-page.sync="currentPage"  layout="total, prev, pager, next" :total="tableDataLength">
                    </el-pagination>
                </div>
            </div> 
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    const probeApiV100 = '/probe/api/v100/';
    const dataDeviceList = probeApiV100 + 'data/device/list';
    import Mock from 'mockjs'
    export default {
        name: 'show_reportManager',
        data() {
            return {
                //todo 这里是data区域
                 pickerOptions1: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                        console.log(this)
                        // this.fetchData(new Date(), new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick (picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', [date, date]);
                        }
                    }, {
                        text: '上周',
                        onClick (picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [date, new Date()]);
                    }
                    }],
                    onPick: function (dt) {
                      console.log(dt)
                      if (dt.maxDate) {
                        console.log(dt.minDate, dt.maxDate)
                        console.log(dt.minDate.toLocaleDateString(), dt.maxDate.toLocaleDateString())
                      }
                    }
                },
                pickerOptions2: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                        console.log(this)
                        // this.fetchData(new Date(), new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick (picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', [date, date]);
                        }
                    }, {
                        text: '上周',
                        onClick (picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [date, new Date()]);
                    }
                    }],
                    onPick: function (dt) {
                      console.log(dt)
                      if (dt.maxDate) {
                        console.log(dt.minDate, dt.maxDate)
                        console.log(dt.minDate.toLocaleDateString(), dt.maxDate.toLocaleDateString())
                      }
                    }
                },
                dateStart: '2017-08-15',
                dateEnd: '2017-08-15',
                currentPage: 1,
                tableData: [],
                dataDeviceData: {},
                multipleSelection: [],
                tableDataLength: 0,
                imgList: [],
                pageSizes: 10,
                imsi: '',
                imei: '',
                manufacture: ''
            }
        },
        components: {
            //TODO 添加子组件
        },
        computed: {
            //TODO 计算区
        },
        methods: {
            //TODO 方法区
            onSubmit () {
                let imsi = this.imsi;
                let imei = this.imei;
                let manufacture = this.manufacture;
                this.fetchData (1,10,imsi,imei,manufacture,4);
            },
            handleSizeChange(rows) {
                this.pageSizes = rows;
                this.fetchData (1,rows,1,2,3,4);
            },
            handleCurrentChange(page) {
                let rows = this.pageSizes;
                this.currentPage = page;
               // console.log(page)
                this.fetchData (page,rows,1,2,3,4);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick() {
                console.log(1);
            },
            fetchData (page,rows,imsi,imei,manufacture,udid) {
                var page = this.currentPage || page || 1;
                var rows  = this.pageSizes || rows || 10;
                var imsi = this.imsi || imsi || 1;
                var imei = this.imei || imei || 2;
                var manufacture = this.manufacture || manufacture || 3;
                var udid = udid || 4;
                this.$axios.post(dataDeviceList, {
                        page:page,
                        rows:rows,
                        imsi:imsi,
                        imei:imei,
                        manufacture:manufacture,
                        udid:udid
                }).then(res=>{
                    //console.log(Mock.mock(res.data.data));
                    let mockData = Mock.mock(res.data.data);
                    this.dataDeviceData = mockData;                
                    let dataDeviceList = mockData.pageInfo.list;
                    this.tableData = dataDeviceList.slice((page-1)*rows,page*rows);
                    this.tableDataLength = dataDeviceList.length;
                   // console.log(this.tableDataLength);

                    //this.dataDeviceData = res.data.data;                
                    // let dataDeviceList = res.data.data.pageInfo.list;
                    // this.tableData = dataDeviceList.slice(0,rows);
                    // this.tableDataLength = dataDeviceList.length;
                }).catch(err => { console.log(err) })
            }
        },
        created () {
            this.fetchData();
        },
        mounted: function () {
            //TODO 函数执行区域

        }
    }
</script>
<style lang="scss" scoped>
    .el-form-item {
        margin-bottom: 0px; 
    }
    .paging_delet_relative{
        position: relative;
        width: 100%;
        margin-top: 20px;
    }
    .block{
        position: absolute;
        top:0;
        right:0;
    }
    .el-button--success {
        color: #fff;
        background-color: #13c4a5;
        border-color: #13c4a5;
    }
</style>
